<script>
import RankingList from '@/components/RankingList.vue'
import Card from '@/components/Card.vue'
import api from '@/api/movie'
export default {
  name: 'Recommond',
  components: {
    RankingList,
    Card
  },
  data(){
    return{
      oneLine:8,
      loaded: 24,
      loading: false,
      limit:8,
      page:3,
      list:[],

    }

  },
  props: ['recommondItems', 'rankinglist'],
  computed:{
    noMore () {
      return this.loaded >= api.getCount()
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  methods: {
    // 滚动条在Y轴上的滚动距离
    getScrollTop: function () {
      var scrollTop = 0
      var bodyScrollTop = 0
      var documentScrollTop = 0
      if (document.body) {
        bodyScrollTop = document.body.scrollTop
      }
      if (document.documentElement) {
        documentScrollTop = document.documentElement.scrollTop
      }
      scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop
      // console.log('scrollTop',scrollTop);
      return scrollTop
    },
    // 文档的总高度
    getScrollHeight: function () {
      var scrollHeight = 0
      var bodyScrollHeight = 0
      var documentScrollHeight = 0
      if (document.body) {
        bodyScrollHeight = document.body.scrollHeight
      }
      if (document.documentElement) {
        documentScrollHeight = document.documentElement.scrollHeight
      }
      scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight
      // console.log('scrollHeight',scrollHeight);

      return scrollHeight
    },
    // 浏览器视口的高度
    getWindowHeight: function () {
      var windowHeight = 0
      if (document.compatMode === 'CSS1Compat') {
        windowHeight = document.documentElement.clientHeight
      } else {
        windowHeight = document.body.clientHeight
      }
      return windowHeight
    },
    scroll: function () {
      window.onscroll = () => {
        debugger
        let bottomOfWindow = this.getScrollTop() + this.getWindowHeight() === this.getScrollHeight()
        if (bottomOfWindow && !this.disabled) {
          this.loading = true
          setTimeout(() => {
            this.page=this.page+1
            api.getMoviePageInfo(this.page,this.limit).then(response=>{
              this.list=response.data.records
              for (let i = 0; i < this.list.length; i++) {
                this.recommondObject={}
                this.recommondObject.name=this.list[i].name
                this.recommondObject.img=this.list[i].image
                this.recommondObject.type=this.list[i].keyword
                // this.recommondItemSon.push({ ...this.recommondObject });
                this.recommondItems.push(this.recommondObject)

              }
            })



            this.loaded += this.oneLine
            this.loading = false
          }, 1000)
        }
      }
    }
  },
  mounted () {
    debugger
    this.scroll()
  }
}

</script>

<template>
  <el-main>
<!--    <el-row>-->
<!--      <el-col :span="20">-->
<!--        <div class="title">-->
<!--          <h2 style="text-align:left;font-weight:700;">作品推荐</h2>-->
<!--        </div>-->
<!--        <el-row :gutter="20">-->
<!--          &lt;!&ndash; 修改循环部分 &ndash;&gt;-->
<!--          <el-col :span="6" v-for="(item, index) in recommondItems" :key="index">-->
<!--            <card :card="item"></card>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <div style="height:auto;overflow-y:hidden;">
      <ul>
        <li v-for="idx in Math.ceil(loaded/oneLine)"
            :key="idx">
          <el-row class="item-row">
            <el-col :span="24/oneLine"
                    v-for="i in oneLine"
                    :key="i">
              <card :card="recommondItems[(idx-1)*oneLine+i-1]"></card>
            </el-col>
          </el-row>
        </li>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">别再拉了，裤子要掉了(〒︿〒)</p>
      </ul>
    </div>
  </el-main>

</template>

<style>
.el-header {
  padding: 0;
  height: auto;
}
.el-main {
  padding-left: 0px;
  padding-right: 0px;
}
.classify-content {
  display: flex;
}
.grid-content {
  height: 100%;
}
.classify-title {
  display: flex;
  margin-bottom: 20px;
}
.type-span {
  margin-right: 14px;
  color: rgba(0, 0, 0, 0.34);
}
.tag-span {
  margin: 0 4px;
  padding: 0 10px;
  color: rgba(0, 0, 0, 0.87);
}
ul {
  padding: 0px;
}
.item-row {
  margin-bottom: 20px;
}
</style>
